<template>
    <div class="div">
        <div class="main">
            <p v-for="(item,index) in content" :key="index">{{item}}</p>
        </div>
        <button :class="{disabled:show1}" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;" class="last" @click="lastChapter">上一章</button>
        <span unselectable="on" onselectstart="return false;" style="-moz-user-select:none;" class="kong">空</span>
        <button :class="{disabled:show3}"  unselectable="on" onselectstart="return false;" style="-moz-user-select:none;" class="next" @click="nextChapter">下一章</button>
    </div>
</template>

<script>
export default {
  props: ["text", "present", "lengthed"],
  data() {
    return {
      content: this.text,
      presentSort: this.present,
      presentLenght: this.lengthed,
      show1: false,
      show3: false
    };
  },
  components: {},
  methods: {
    lastChapter() {
      this.presentSort--;
      if (this.presentSort === 1) {
        this.show1 = true;
        this.show3 = false;
      } else if (this.presentSort < 1) {
        this.presentSort++;
      } else {
        this.show1 = false;
        this.show3 = false;
      }
      this.$emit("changeChapter", this.presentSort, 0);
    },
    nextChapter() {
      this.presentSort++;
      if (this.presentSort === this.presentLenght) {
        this.show1 = false;
        this.show3 = true;
      } else if (this.presentSort > this.presentLenght) {
        this.presentSort--;
      } else {
        this.show1 = false;
        this.show3 = false;
      }
      this.$emit("changeChapter", this.presentSort, 1);
    },
    // 格式化小说章节内容
    formatting(text) {
      text = text.replace(/&nbsp;&nbsp;&nbsp;&nbsp;/gi, "");
      let arr = [];
      if (text.indexOf("</p><p>") > -1) {
        arr = text.split("</p><p>");
        arr[0] = arr[0].replace(/\<p\>/, "");
        arr[arr.length - 1] = arr[arr.length - 1].replace("</p>", "");
      } else if (text.indexOf("<br>") > -1) {
        arr = text.split("<br>");
      } else if (text.indexOf(/\r\n/) > -1) {
        arr = text.split(/\r\n/);
      } else if (text.indexOf(/\r/) > -1) {
        arr = text.split(/\r/);
      } else {
        arr = text.split(/\n/);
      }
      for (let i = 0; i < arr.length; i++) {
        arr[i] = arr[i].trim();
      }
      return arr;
    }
  },
  watch: {
    text(value, oldvalue) {
      this.content = this.formatting(value);
    },
    present(value, oldvalue) {
      this.presentSort = value;
    },
    lenght(value, oldvalue) {
      this.presentLenght = value;
    }
  },
  created() {
    if (this.presentSort === 1) {
      this.show1 = true;
      this.show3 = false;
    } else if (this.presentSort === this.presentLenght) {
      this.show1 = false;
      this.show3 = true;
    } else {
      //   this.show1 = true;
      //   this.show2 = true;
      //   this.show3 = true;
    }
    this.content = this.formatting(this.content);
  }
};
</script>


<style scoped>
.div {
  text-align: center;
}
.main {
  font-size: 14px;
  padding-bottom: 21px;
  padding-right: 1em;
  height: 480px;
  overflow-y: scroll;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
  box-sizing: border-box;
}
.main p {
  line-height: 28px;
  margin-bottom: 15px;
  text-indent: 2em;
  text-align: justify;
}
span,
button {
  display: inline-block;
  width: 104px;
  height: 33px;
  background-color: #ff9933;
  border: none;
  border-radius: 6px;
  text-align: center;
  line-height: 33px;
  color: #fff;
  font-family: Microsoft YaHei;
  font-size: 14px;
  outline: none;
}
.kong {
  width: 70px;
  opacity: 0;
}
.next {
  background-color: #36a4ff;
}
.last:hover {
  cursor: pointer;
}
.next:hover {
  cursor: pointer;
}
.last:active {
  background-color: #ff8811;
}
.next:active {
  background-color: #0c87ec;
}
button.disabled {
  background-color: #ccc;
}
button.disabled:hover {
  cursor: not-allowed;
}
button.disabled:active {
  background-color: #ccc;
}
</style>

